<template>
  <div class="tag-select">
    <template v-for="(item, index) in itemData" :key="index">
      <span
        :class="['item', item.isSelect ? 'active' : '']"
        @click="clickItem(index)"
        >{{ item.label }}</span
      >
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  itemData: {
    type: Array,
    default: () => [],
  },
});
const clickItem = (index) => {
  props.itemData.forEach((item, i) => {
    item.isSelect = i === index;
  });
};
</script>

<style lang="less" scoped>
.tag-select {
  height: 29px;
  line-height: 29px;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  &::-webkit-scrollbar {
    display: none;
    width: 0;
  }
  .item {
    background-color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    margin: 2px 6px;
  }
  .active {
    color: var(--color);
  }
}
</style>
